<template>
  <n-layout has-sider class="containers">
    <n-layout-sider class="sider" width="400px">
      <car-tree-select @check="onCarSelect" @onSelect="onCarClick" @submit="onSubmit">
        <template #form>
          <n-form
            :label-col="{ style: 'margin-right: 4px' }"
            :wrapper-col="{ style: 'flex: 1;' }"
            :form="form"
            @submit="onSubmit"
          >
            <n-form-item style="margin-bottom: 2px !important; display: flex" label="开始时间：">
              <n-date-picker
                style="width: 100%"
                :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss'), format: 'HH:mm:ss' }"
                format="YYYY-MM-DD HH:mm:ss"
                placeholder="开始时间"
              />
            </n-form-item>
            <n-form-item style="margin-bottom: 12px !important; display: flex" label="结束时间：">
              <n-date-picker
                style="width: 100%"
                :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss'), format: 'HH:mm:ss' }"
                format="YYYY-MM-DD HH:mm:ss"
                placeholder="结束时间"
              />
            </n-form-item>
            <n-button
              type="primary"
              htmlType="submit"
              class="submit-button"
              :loading="submitLoading"
            >
              查询
            </n-button>
          </n-form>
        </template>
      </car-tree-select>
    </n-layout-sider>
    <!-- <a-layout-header></a-layout-header> -->
    <n-layout-content style="position: relative; display: flex; flex-direction: column">
      <div style="display: flex; height: 100%; flex: 1">
        <div
          style="
            flex: 2;
            background-image: url('/img/wxkj-bg.f2b2590c.png') no-repeat;
            text-align: center;
            background-color: #0d2457;
          "
        >
          <video
            id="wx-dplayer"
            style="
              flex: 2;
              background-image: url('/img/wxkj-bg.f2b2590c.png') no-repeat;
              text-align: center;
              background-color: #0d2457;
            "
          >
            <img :src="WxkjBg" style="height: 100%" />
          </video>
        </div>
        <div style="flex: 1">
          <WxMap :hasToolBar="false" />
        </div>
      </div>
      <car-progress
        @switchVideo="switchVideo"
        :queryStartTime="queryStartTime"
        :queryEndTime="queryEndTime"
        :videoList="terminalVideoList"
        ref="carProgress"
        :tableList="gpsList"
      />
    </n-layout-content>
  </n-layout>
</template>

<script lang="ts">
  import WxMap from '@/components/WxMap/WxMap.vue';
  import { defineComponent } from 'vue';
  import CarTreeSelect from '@/components/CarTreeSelect/CarTreeSelect.vue';
  import moment from 'moment';
  export default defineComponent({
    components: {
      WxMap,
      CarTreeSelect,
    },
    setup: () => {
      return {
        moment,
      };
    },
  });
</script>

<style lang="less" scoped>
  @import url('./Replay.less');
  :deep .ant-table {
    font-size: 12px !important;
  }
  :deep .ant-form-item-label {
    text-align: left;
  }
  :deep .ant-form-item-label label {
    font-size: 12px !important;
    margin-right: 2px !important;
  }
  .star-checkbox :deep span {
    vertical-align: bottom;
  }
  .map-search-container {
    background-color: white;
    width: 200px;
    height: 44px;
    position: absolute;
    top: 12px;
    left: 16px;
    z-index: 2;
    :deep .ant-input {
      height: 44px;
      line-height: 44px;
      font-size: 12px;
      border-right: none !important;
      border: none;
    }
    :deep .ant-input-group-addon {
      cursor: pointer;
      border: none;
      background-color: inherit;
      // padding: 15px 13px !important;
      box-sizing: border-box;
    }
  }
  .map-toolbar-container {
    height: 44px;
    line-height: 44px;
    overflow: hidden;
    position: absolute;
    top: 10px;
    right: 24px;
    min-width: 498px;
    background-color: white;
    z-index: 2;
    display: flex;
    .map-toolbar-item {
      min-width: 75px;
      height: 44px;
      font-size: 12px;
      color: #333;
      line-height: 44px;
      cursor: pointer;
      display: flex;
      align-items: center;
      padding: 10px 8px;
      box-sizing: border-box;
      position: relative;
    }
    .map-toolbar-item:nth-child(n + 3)::before {
      content: ' ';
      position: absolute;
      left: 0;
      top: 50%;
      bottom: 50%;
      transform: translateX(-50%) translateY(-50%);
      width: 1px;
      height: 18px;
      background-color: #eee;
    }
    .map-toolbar-item:last-child::before {
      content: none;
    }
  }
  :deep .ant-input {
    font-size: 12px;
  }
  :deep .ant-checkbox-wrapper {
    display: flex;
    align-items: center;
    line-height: 20px;
  }
  :deep .ant-checkbox {
    top: unset !important;
  }
  :deep .ant-checkbox-inner {
    width: 12px;
    height: 12px;
  }
</style>
